import React, { memo, Component } from 'react'
import { getUserInfo, getClassInfo, getConfessionDetail } from '@/api'
import { getParam } from '@/utils/tool'
import { Spin, Alert, message } from 'antd'
import './index.css'
import hot from '../../../assets/image/hot.png'
import { baseUrl } from '../../../assets/baseUrl'
import { formatDate, getDateDiff } from '@/utils/tool'
import ConfessionCard from '../components/confessionCard'
import Comments from './../components/pageComponents/comments'
const BaseUrl = baseUrl()
class ConfessionDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id: getParam(this.props.location.search, 'id'),
      userInfo: null,
      detail: null,
      imgs: [] //图片列表
    }
  }

  componentDidMount() {
    this.queryConfessionDetail()
    getUserInfo().then((res) => {
      let userInfo = res.data?.data[0]
      this.setState({
        userInfo
      })
    })
  }
  queryConfessionDetail = () => {
    const { id } = this.state
    getConfessionDetail({ id: id }).then((res) => {
      let imgs = res.data.detail.files?.split('&')
      imgs?.map((item, index) => {
        if (item == '') imgs.splice(index, 1)
      })
      this.setState({ detail: res.data.detail, imgs: imgs })
    })
  }
  render() {
    const { detail, userInfo, id, imgs } = this.state
    return (
      <div className="confessionContent">
        <div
          style={{
            padding: '30px 0 30px 48px',
            width: '30vw',
            backgroundColor: 'rgba(255,255,255,.2)',
            borderRadius: 16,
            // marginLeft:'3%',
            position: 'fixed',
            left: '3%',
            top: '180px',
            boxShadow: '1px 1px 5px rgb(129,129,129)'
          }}
        >
          <ul className="detail-ui">
            <li>
              <span></span>
              {imgs.map((item) => {
                return (
                  <img
                    className="thingImage"
                    src={`${BaseUrl}${item}`}
                    alt=""
                    onClick={() => {
                      this.setState({
                        previewVisible: true,
                        previewImage: `${BaseUrl}${item}`
                      })
                    }}
                    style={{
                      marginRight: '10px',
                      borderRadius: '5px',
                      border: '1px solid white'
                    }}
                  />
                )
              })}
            </li>
            <li>
              <span>标题：《 </span>
              {`${detail?.title}`}
              <span> 》 </span>
            </li>
            <li>
              <span>表白描述：</span>
              {`${detail?.content}`}
            </li>

            <li>
              <span>评论数：</span>
              {`${detail?.totalCount}`}
            </li>
            <li>
              <span>浏览量：</span>
              {`${detail?.browseCount}`}
              <img
                src={hot}
                alt=""
                style={{
                  width: 20,
                  height: 20,
                  border: 'none',
                  borderRadius: '50%',
                  marginLeft: 3,
                  marginBottom: 3,
                  display: 'inline-block'
                }}
              />
            </li>
            <li>
              <span>发布者： </span>
              {detail?.headPicUrl == '********' ? (
                ''
              ) : (
                <img
                  src={`${BaseUrl}${detail?.headPicUrl}`}
                  alt=""
                  style={{
                    width: 30,
                    height: 30,
                    border: 'none',
                    borderRadius: '50%',
                    marginRight: 6,
                    display: 'inline-block'
                  }}
                />
              )}

              <div style={{ display: 'inline-block' }}>{detail?.nickName}</div>
            </li>
            <li>
              <span>发布时间：</span>
              {`${formatDate(detail?.createTime)}  (${getDateDiff(
                detail?.createTime
              )})`}
            </li>
            {/* <li>
                                    <span>物品类型：</span>
                                    {`${detail?.tag}`}
                                </li> */}
          </ul>
        </div>
        {userInfo?.classId && <Comments type={1} userInfo={userInfo} id={id} />}
      </div>
    )
  }
}

export default memo(ConfessionDetail)
